<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>电池柜场景</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script src='/examples/demo/Battery.js'></script>
<script type="text/javascript">

    loadCounter(6); //指定加载6个电池柜 
    loadBatteryInCounter(0, 2); //为某个电池柜指定加载电池的数量。第一个参数表示电池柜的编号，第二个参数表示要加载电池的数量

    updateCounter(); //更新电池柜的屏幕
    updateBattery(0, 0); //更新电池柜中某个电池

    function updateCounter() {
        //为电柜的屏幕做更新
        const drawingCanvas = screenDisplay.canvas;
        if (!drawingCanvas) {
            setTimeout(() => {
                updateCounter();
            }, 500);

            return;
        }
        const drawingContext = drawingCanvas.getContext('2d');
        drawingContext.fillStyle = 'blue';
        drawingContext.fillRect(0, 0, 1024, 512);
        //前端添加自己的逻辑, 更新canvas


        //canvas更新完毕后，更新纹理
        screenDisplay.texture.needsUpdate = true;
    }

    ///更新电池柜中某个电池。counterIndex表示某个电池柜的编号，某个表示电池柜中电池的编号
    function updateBattery(counterIndex, batteryIndex) {
        //更新某个电池柜中某个电池。
        var batteryData = batteryDisplayMap.get('{"counterIndex":' + counterIndex + ',"batteryIndex":' + batteryIndex + '}'); //counterIndex某个电池柜的编号，某个电池柜中电池的编号
        if(!batteryData){
            setTimeout(() => {
                updateBattery(counterIndex, batteryIndex);
            }, 500);

            return;
        }
        var drawingCanvas = batteryData.canvas;
        const drawingContext = drawingCanvas.getContext('2d');
        drawingContext.fillStyle = '#FF4500';
        drawingContext.fillRect(0, 0, 1280, 1280);
        //前端添加自己的逻辑, 更新canvas


        //canvas更新完毕后，更新纹理
        batteryData.texture.needsUpdate = true;
    }

</script>

</html>
<button>

</button>